<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test17</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<h1 style="text-align: center">HTML复习历程-17</h1>
<div id="app1">
    <p>{{result1}}</p>
</div>
<div id="app2">
    <p>{{result2}}</p>
</div>
<script type="text/javascript">
    new Vue({
        el:"#app1",
        data(){
            return {
                result1:""
            };
        },
        mounted(){
            axios
            .get(
                'https://www.runoob.com/try/ajax/json_demo.json'
                /*,{//传递请求参数
                    params:{
                        id:123,
                        name:"liming"
                    }
                }*/
            )
            .then(response => (
                this.result1 = response
                )
            )
            .catch(function (error) {
                console.log(error)
            })
        }
    })
    new Vue({
        el:"#app2",
        data() {
            return {
                result2:""
            };
        },
        mounted() {
            axios
            .post('https://www.runoob.com/try/ajax/demo_axios_post.php'
                /*,{//传递参数
                id:12345,
                    name:"li"
                }*/
            )
            .then(response => (this.result2 = response))
            .catch(function (error) {
                console.log(error)
            })
        }
    })
</script>
</body>
</html>
